<template>
  <div class="postTable">
    <div style="">
      <router-link to="/TopicList">
        <el-button type="primary">返回</el-button>
      </router-link>
    </div>
    <h2 style="margin-left: 675px;height: 15px;margin-top: 0;">帖子</h2>
    <hr style="width: 1450px;margin-left: 0"/>
    <div v-for="(blogs,index) in blogTable" :key="index" :data="blogs">
      <div>
        <el-row type="flex" justify="start">
          <div v-for="item in blogs" :key="item.id" :data="item" style="width: 500px">
            <BlogContainer :blog="item">
              <template v-slot:operation1>
                <el-button type="primary" round style="width: 65px;margin-top: 2px;" @click="showDetail(item)">详情</el-button>
                <el-button type="danger" round style="width: 65px;margin-top: 2px;" @click="handleDelete(item)">删除</el-button>
              </template>
            </BlogContainer>
          </div>
        </el-row>
      </div>

    </div>

    <pagination v-show="total > 0"
                :total="total" :page.sync="queryParams.pageNum"
                :page-sizes="[10]" :layout="'prev, pager, next'"
                :limit.sync="queryParams.pageSize" @pagination="getBlogPage"
    />
    <el-dialog :visible.sync="open" append-to-body width="300" title="帖子详情" class="detail-dialog">
      <h1 style="margin-left: 15px;color: black">用户名称</h1>
      <hr style="width: 97%;background-color:lightgrey; height:1px; border:none;">
<!--      <div class="blog-detail" style="height: 300px;">-->
<!--        <el-input :readonly="true" v-model="detail.content" type="textarea" :rows="7"></el-input>-->
<!--      </div>-->
      <div style="color: black;font-size: 23px;font-weight:lighter;height: 200px;width: 95%;margin-left: 20px">{{detail.content}}</div>
      <hr style="width: 97%;background-color:lightgrey; height:1px; border:none;">
      <span style="margin-left: 15px" >{{detail.createTime}}</span>
    </el-dialog>
  </div>
</template>

<script>
import {listBlog,pageBlog,deleteBlog} from "@/api/blog";
import BlogContainer from "@/views/blog/BlogContainer";
import SearchBox from "@/views/reservation/search";
import Pagination from "@/components/Pagination/index";

export default {
  name:"BlogListView",
  components: {
    SearchBox, BlogContainer, Pagination
  },
  data() {
    return {
      open:false,
      blogList: [],
      blogTable: null,
      queryParams: {
        pageNum: 1,
        pageSize: 9,
        topicId:0,
      },
      total: 0,
      loading: false,
      blogDetail:"",
      detail: {
        content:"",
        createTime:""
      },
    }
  },
  created() {
    this.getBlogPage(this.queryParams)
  },
  methods: {
    getBlogList() {
      listBlog()
        .then((response) => {
          if (response.success) {
            this.postList = response.data
          }
        }).catch((e) => {
        _this.$message.error(e, "出现未知错误");
      })
    },
    getBlogPage(data) {
      this.loading = true;
      if(this.queryParams.topicId===0){
        this.queryParams.topicId=this.$route.query.id
      }
      data.topicId=this.queryParams.topicId
      pageBlog(data)
        .then((response) => {
          if (response.success) {
            this.blogList = response.data.records;
            this.blogTable = this.blogList.flatMap(((value, index, array) => {
                if (index % 3 === 0) {
                  return [array.slice(index, index + 3)]
                }
                return []
              }
            ))
            if (this.total === 0) {
              this.total = response.data.total;//重要，会决定有几个页码按钮
            }
            this.loading = false;
          }
        }).catch((e) => {
        _this.$message.error(e, "出现未知错误");
      })
    },
    showDetail(data){
      this.detail=data
      this.open=true
      this.blogDetail=data.content
    },
    handleDelete(row){
      deleteBlog({id:row.id})
        .then((response)=>{
            if(response.success){
              this.$alert("删除成功", {
                confirmButtonText: "确认",
                callback: (action) => {
                  this.$router.go(0)
                },
              });
            }
          }
        )
    }
  }
}
</script>
<style lang="scss" scoped>
.blog-detail /deep/.el-input__inner {
  border: 0;
}

.blog-detail /deep/.el-textarea__inner {
  border: 0;
  resize: none;
  font-size: 25px;
  color: black;
}
.detail-dialog /deep/.el-dialog__body{
  background: linear-gradient(135deg,rgb(57,167,176),rgb(56,183,145));
  //background-color: ;
}
.detail-dialog /deep/.el-dialog__header{
  background: linear-gradient(135deg,rgb(57,167,176),rgb(56,183,145));
  //background-color: ;
}

</style>
